<template>
  <PageContainer>
    <Header title="入圈申请详情" :data="data">
      <template>
        <ApplyStatusView
          v-if="data"
          :status="data?.reviewStatus"
          :create-time="data?.createTime"
          type="circle"
        />
        <view class="hb-flex hb-items-center hb-p-3">
          <TmImage
            class="hb-flex-shrink-0"
            :src="data?.iconFileUrl"
            :width="96"
            :height="96"
            :round="4"
          />
          <view class="hb-flex-1 hb-mx-3 hb-h-12 hb-flex hb-flex-col hb-justify-between">
            <view class="hb-flex-1 hb-flex hb-items-center hb-justify-between">
              <TmText
                _class="text-overflow-1 hb-font-bold"
                :label="data?.applyName"
                :font-size="32"
              />
              <TmButton
                class="hb-flex-shrink-0"
                :margin="[0, 0]"
                :padding="[16, 0]"
                :block="true"
                color="primary"
                font-color="primary"
                :height="48"
                :font-size="24"
                outlined
                :round="16"
                label="查看名片"
                @click="handleViewCard"
              />
            </view>
            <!-- 认证 -->
            <AuthenticationTag :certification-type="data?.certificationType" />
          </view>
        </view>
      </template>
    </Header>
    <view>
      <view class="hb-p-3">
        <!-- 身份设置 -->
        <view class="hb-box-shadow-base hb-rounded-xl hb-bg-white hb-px-4 hb-mb-3">
          <TmText _class="hb-py-3" label="身份设置" color="#969799" :font-size="28" />
          <TmCell :title-font-size="32" :transparent="true" :margin="[0, 0]" :padding="[0, 24]">
            <template #label>
              <view class="hb-flex hb-items-center" @click="handleShowIdentityHelp">
                <TmText _class="hb-font-bold" label="圈子身份" :font-size="32" />
                <TmIcon
                  _class="hb-ml-1 hb-font-normal"
                  name="ali-icon icon-question"
                  color="#969799"
                  :font-size="32"
                />
              </view>
            </template>
            <template #right>
              <view class="hb-flex hb-items-center" @click="handleSetIdentity">
                <TmText
                  :label="identityName || '未设置身份'"
                  :color="data?.reviewStatus !== ReviewStatusEnum.PENDING ? '#C8CACC' : ''"
                  :font-size="28"
                />
                <TmIcon
                  _class="hb-ml-1"
                  name="tmicon-angle-right"
                  color="#969799"
                  :font-size="24"
                />
              </view>
            </template>
          </TmCell>
        </view>
        <!-- 备注信息 -->
        <view class="hb-box-shadow-base hb-rounded-xl hb-bg-white hb-px-4">
          <TmText _class="hb-py-3" label="备注信息" color="#969799" :font-size="28" />
          <TmForm
            layout="vertical"
            :padding="[0, 0]"
            :margin="[0, 0]"
            :transparent="true"
            :border="false"
            v-model="formData"
          >
            <TmFormItem
              :show-top-error-gap="false"
              :margin="[0, 0]"
              :padding="[0, 0]"
              :transparent="true"
              field="displayName"
            >
              <template #label>
                <TmText _class="hb-font-bold hb-mb-2" label="在本圈子的名称" :font-size="28" />
              </template>
              <TmInput
                v-model="formData.displayName"
                :font-size="28"
                show-char-number
                :disabled="data?.reviewStatus !== ReviewStatusEnum.PENDING"
                :maxlength="20"
                placeholder="请输入"
              />
            </TmFormItem>
            <TmFormItem
              :show-top-error-gap="false"
              :margin="[0, 0]"
              :padding="[0, 0]"
              :transparent="true"
              field="describe"
            >
              <template #label>
                <TmText _class="hb-font-bold hb-mb-2" label="描述备注" :font-size="28" />
              </template>
              <TmInput
                v-model="formData.describe"
                :height="160"
                :font-size="28"
                :inputPadding="[16, 16]"
                :disabled="data?.reviewStatus !== ReviewStatusEnum.PENDING"
                placeholder="备注成员的一些其他信息"
                type="textarea"
              />
            </TmFormItem>
          </TmForm>
        </view>
      </view>
      <view
        class="hb-fixed hb-bottom-0 hb-left-0 hb-w-full hb-px-4 hb-py-3 hb-bg-white hb-flex hb-items-center hb-gap-3"
      >
        <TmButton
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="联系ta"
          :follow-theme="false"
          color="#fff"
          :border="1"
          border-color="#C8CACC"
          :round="16"
          :font-size="28"
          :height="88"
          :block="data?.reviewStatus !== ReviewStatusEnum.PENDING"
          @click="handleContact"
        />
        <TmButton
          v-if="data?.reviewStatus === ReviewStatusEnum.PENDING"
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="驳回申请"
          :follow-theme="false"
          color="#EA5E0E"
          :round="16"
          :font-size="28"
          :height="88"
          @click="handleReject"
        />
        <TmButton
          v-if="data?.reviewStatus === ReviewStatusEnum.PENDING"
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="同意申请"
          color="primary"
          :round="16"
          :font-size="28"
          :height="88"
          @click="handleAgree"
        />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* circleApplyDetail 入圈申请详情 */
  import { auditCircleJoin, circleApplyDetail } from '@/api/contact';
  import { AuditCircleJoinData, CircleJoinApplyListResult } from '@/api/contact/types';
  import { ReviewStatusEnum } from '@/enums/PublicEnum';
  import { CircleApplyDetail } from '@/router/types/modules';
  import { Toast } from '@/utils';
  import ApplyStatusView from '../components/ApplyStatusView.vue';

  const auditId = ref<number>(0);
  const data = ref<CircleJoinApplyListResult>();
  const identityName = ref<string>();
  const circleIdentityId = ref<number>();
  const formData = reactive({
    displayName: '',
    describe: '',
  });
  let success: CircleApplyDetail['success'];

  const getCircleApplyDetail = () => {
    circleApplyDetail({ id: auditId.value }).then((res) => {
      data.value = res;
      identityName.value = res.identityName;
      formData.displayName = res.applyName;
      formData.describe = res.describe;
    });
  };

  customOnload<'circleApplyDetail'>((op) => {
    auditId.value = op.id;
    getCircleApplyDetail();
    success = op.success;
  });

  const handleShowIdentityHelp = () => {
    uni.showModal({
      title: '圈子身份',
      content: '可以给圈子成员赋予身份标签，让该成员有独特身份标签展示。',
      confirmColor: '#2878FF',
      confirmText: '知道了',
      showCancel: false,
    });
  };

  /** 设置身份 */
  function handleSetIdentity() {
    if (data.value?.reviewStatus !== ReviewStatusEnum.PENDING) return;
    navigateTo({
      name: 'selectMemberIdentity',
      options: {
        circleId: data.value!.circleId,
        selected: circleIdentityId.value,
        success: (d) => {
          identityName.value = d?.name;
          circleIdentityId.value = d?.id;
        },
      },
    });
  }

  const handleContact = () => {
    if (data.value?.applyPersonPhone) {
      uni.makePhoneCall({
        phoneNumber: data.value.applyPersonPhone,
      });
    } else {
      Toast('对方暂未填写联系方式');
    }
  };

  const handleReject = () => {
    uni.showModal({
      title: '驳回申请',
      content: '确定要拒绝ta的入圈请求？',
      cancelColor: '#969799',
      cancelText: '取消',
      confirmColor: '#EA5E0E',
      confirmText: '确定',
      success: (res) => {
        if (res.confirm) {
          handleSuccess({ id: data.value!.id, reviewStatus: ReviewStatusEnum.REJECTED });
        }
      },
    });
  };
  const handleAgree = () => {
    uni.showModal({
      title: '同意申请',
      content: '确定同意ta入圈？',
      cancelColor: '#969799',
      cancelText: '取消',
      confirmColor: '#2878FF',
      confirmText: '确定',
      success: (res) => {
        if (res.confirm) {
          handleSuccess({
            id: data.value!.id,
            reviewStatus: ReviewStatusEnum.APPROVED,
            displayName: formData.displayName,
            describe: formData.describe,
            circleIdentityId: circleIdentityId.value,
          });
        }
      },
    });
  };

  function handleSuccess(data: AuditCircleJoinData) {
    auditCircleJoin(data).then(() => {
      Toast('操作成功');
      getCircleApplyDetail();
      success?.();
    });
  }

  const handleViewCard = () => {
    navigateTo({
      name: 'cardDetail',
      options: { uuid: data.value!.botUUid },
    });
  };
</script>

<style lang="scss" scoped></style>
